<template>
    <section id="tools" class="py-20 bg-gray-50">
      <div class="text-center max-w-3xl mx-auto mb-16">
        <span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 text-sm font-medium rounded-full mb-4">AI 工具集</span>
        <h2 class="text-[clamp(1.75rem,3vw,2.5rem)] font-bold text-gray-900 mb-6">强大的 AI 工具，满足多样需求</h2>
        <p class="text-lg text-gray-600">探索我们丰富的 AI 工具库，从文本生成到图像创作，一应俱全。</p>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group">
          <div class="relative h-48 overflow-hidden">
            <img src="https://picsum.photos/seed/aigenerator/600/400" alt="AI 文本生成器" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
            <div class="absolute bottom-4 left-4 right-4">
              <span class="inline-block px-2 py-1 bg-indigo-500/90 text-white text-xs font-medium rounded">文本处理</span>
            </div>
          </div>
          <div class="p-6">
            <h3 class="text-xl font-bold text-gray-900 mb-2">AI 文本生成器</h3>
            <p class="text-gray-600 mb-4">基于先进语言模型，生成高质量文章、故事、营销文案等内容。</p>
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-1">
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star-half-o text-yellow-400"></i>
                <span class="text-gray-600 text-sm ml-1">4.8</span>
              </div>
              <button class="text-indigo-600 hover:text-indigo-700 font-medium flex items-center">
                立即使用 <i class="fa fa-arrow-right ml-1"></i>
              </button>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group">
          <div class="relative h-48 overflow-hidden">
            <img src="https://picsum.photos/seed/aigenerator/600/400" alt="AI 图像生成器" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
            <div class="absolute bottom-4 left-4 right-4">
              <span class="inline-block px-2 py-1 bg-purple-500/90 text-white text-xs font-medium rounded">图像处理</span>
            </div>
          </div>
          <div class="p-6">
            <h3 class="text-xl font-bold text-gray-900 mb-2">AI 图像生成器</h3>
            <p class="text-gray-600 mb-4">根据文本描述创建高质量图像，支持多种风格和尺寸。</p>
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-1">
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <span class="text-gray-600 text-sm ml-1">5.0</span>
              </div>
              <button class="text-indigo-600 hover:text-indigo-700 font-medium flex items-center">
                立即使用 <i class="fa fa-arrow-right ml-1"></i>
              </button>
            </div>
          </div>
        </div>
        
        <div class="bg-white rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 hover:-translate-y-1 group">
          <div class="relative h-48 overflow-hidden">
            <img src="https://picsum.photos/seed/aigenerator/600/400" alt="AI 数据分析" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
            <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
            <div class="absolute bottom-4 left-4 right-4">
              <span class="inline-block px-2 py-1 bg-green-500/90 text-white text-xs font-medium rounded">数据分析</span>
            </div>
          </div>
          <div class="p-6">
            <h3 class="text-xl font-bold text-gray-900 mb-2">AI 数据分析</h3>
            <p class="text-gray-600 mb-4">自动分析复杂数据集，生成可视化报告和有价值的见解。</p>
            <div class="flex items-center justify-between">
              <div class="flex items-center space-x-1">
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star text-yellow-400"></i>
                <i class="fa fa-star-o text-yellow-400"></i>
                <span class="text-gray-600 text-sm ml-1">4.2</span>
              </div>
              <button class="text-indigo-600 hover:text-indigo-700 font-medium flex items-center">
                立即使用 <i class="fa fa-arrow-right ml-1"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <div class="text-center mt-12">
        <button class="px-6 py-3 bg-white hover:bg-gray-50 text-indigo-600 hover:text-indigo-700 font-medium rounded-lg transition-all duration-300 border border-gray-300 shadow-md hover:shadow-lg">
          查看全部工具 <i class="fa fa-arrow-right ml-2"></i>
        </button>
      </div>
    </section>
  </template>    